<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed, onMounted, ref } from 'vue'
import {
  deletePictureUsingPost,
  editPictureUsingPost,
  getPictureByIdUsingGet, listPictureTagCategoryUsingGet
} from '@/servers/api/pictureController.ts'
import { downloadImage, formatSize } from '@/utils'
import { message } from 'ant-design-vue'
import UploadForm from '@/components/upload-form/index.vue'

const route = useRoute()
const router = useRouter()
// 图片ID
const pictureId = computed(() => route.query.id)
// 图片详情
const pictureDetail = ref<API.PictureVO>({})

// 获取图片详情
const getPictureDetail = async () => {
  const res = await getPictureByIdUsingGet({
    id: pictureId.value
  })
  if (res.code == 200) {
    pictureDetail.value = {
      ...res.data,
      tags: JSON.parse(res.data.tags ?? '[]')
    }
  }
}

// 删除按钮点击事件
// 删除
const deletePicture = async (id: number) => {
  const res = await deletePictureUsingPost({ id })
  if (res.code == 200) {
    message.success('删除成功')
    // 跳转首页
    router.push({
      path: '/home'
    })
  }
}

/** 编辑模块 */
const editModal = ref<boolean>(false);
const editData = ref<API.PictureVO>({})
// 分类选项
const categoryOptions = ref<string[]>([])
// 标签选项
const tagOptions = ref<string[]>([])

// 图片上传成功
const uploadSuccess = (newPicture: API.PictureVO) => {
  pictureDetail.value.url = newPicture.url
}
// 编辑按钮点击
const editBtnClick = () => {
  editData.value = { ...pictureDetail.value }
  editModal.value = true;
};

// 编辑表单提交
const handleOk = async () => {
  // 请求接口编辑数据
  const res = await editPictureUsingPost(editData.value)
  if (res.code == 200) {
    editModal.value = false;
    message.success("编辑成功");
    await getPictureDetail()
  }
};

// 获取标签和分类选项
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.code == 200 && res.data) {
    // 转换成下拉选项组件接受的格式
    tagOptions.value = (res.data.tagList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
    categoryOptions.value = (res.data.categoryList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
  }
}

onMounted(() => {
  getPictureDetail()
  getTagCategoryOptions()
})

</script>

<template>
  <div class="pictureDetail-detail-page">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="16">
        <a-card title="图片预览" style="width: 100%; height: 100%;">
          <div class="img-box">
            <img :src="pictureDetail?.url" :alt="pictureDetail?.name" class="img" />
          </div>
        </a-card>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <a-card title="图片信息" style="width: 100%; height: 100%;">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="pictureDetail?.user?.userAvatar" />
                <div>{{ pictureDetail?.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ pictureDetail.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ pictureDetail.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ pictureDetail.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in pictureDetail.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ pictureDetail.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ pictureDetail.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ pictureDetail.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ pictureDetail.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(pictureDetail.picSize) }}
            </a-descriptions-item>
          </a-descriptions>
          <a-space>
            <a-button @click="editBtnClick">编辑</a-button>
            <a-button type="primary" danger @click="deletePicture">删除</a-button>
            <a-button type="primary" @click="downloadImage(pictureDetail.url, pictureDetail.name)">下载</a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
    <!-- 弹窗 -->
    <a-modal v-model:open="editModal" title="编辑图片" @ok="handleOk">
      <div>
        <UploadForm :picture="editData" :on-success="uploadSuccess" />
      </div>
      <a-form :model="editData" @finish="handleOk">
        <a-form-item label="名称" name="name">
          <a-input v-model:value="editData.name" placeholder="请输入名称" />
        </a-form-item>
        <a-form-item label="分类" name="category">
          <a-auto-complete
            v-model:value="editData.category"
            :options="categoryOptions"
            placeholder="请输入分类"
            allowClear
            style="width: 100%;"
          />
        </a-form-item>
        <a-form-item label="标签" name="tags">
          <a-select
            v-model:value="editData.tags"
            :options="tagOptions"
            mode="tags"
            placeholder="请输入标签"
            allowClear
            style="width: 100%;"
          />
        </a-form-item>
        <a-form-item label="简介" name="introduction">
          <a-textarea
            v-model:value="editData.introduction"
            placeholder="请输入简介"
            :auto-size="{ minRows: 2, maxRows: 5 }"
            allowClear
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped lang="scss">
.pictureDetail-detail-page {
  width: 1200px;
  margin: 0 auto;
}

.img-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 350px;
    height: 350px;
  }
}
</style>
